<template>
  <!-- <div class="container" :class="isBg?'bgClass':''"> -->
  <div class="container">
    <ul class="dv">
      <li
        v-for="(item,index) in arrayBtn"
        :key="index"
        class="dv_item"
        :class="{'active' : currentIndex === index}"
        @click="checkTime(item,index)"
      >{{item.value}}</li>
    </ul>
    <div class="bgbox"
           v-if="list.length==0">
        <img src="https://img.ameimeika.com/h5_images/lifebeauty/3/14%403x.png"
             alt
             class="nothing">
        <div class="text">没有相关数据哦</div>
      </div>
    <scroll-div
      :scroll-y="true"
      :style="{'height': '100%'}"
      @scroll="scroll"
      @scrolltolower="pullrefresh"
      class="scroll_div"
      v-if="list.length > 0"
    >
      <ul class="list">
        <li class="list_li" v-for="(item,index) in list" :key="index">
          <span class="title">{{item.msg}}</span>
          <br />
          <span class="time">{{item.time}}</span>
          <span
            class="amount"
            v-html="item.amount"
            :class="(item.amount-0)>0 ?'red':'' "
          ></span>
          <span class="tip" v-if="item.remark">{{item.remark}}</span>
        </li>
      </ul>
    </scroll-div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data() {
    return {
      imgUrl: "https://img.ameimeika.com/",
      ImgBaseUrl: "https://h5.ameimeika.com/mp_images/",
      arrayBtn: [
        {
          id: 0,
          value: "全部"
        },
        {
          id: 1,
          value: "最近7天"
        },
        {
          id: 2,
          value: "最近30天"
        },
        {
          id: 3,
          value: "最近3个月"
        }
      ],
      currentIndex: 1,
      pageNum: 1,
      timeType: 0,
      list: [],
      isbottom: false,
      isBg: false
    };
  },
  methods: {
    checkTime(item, index) {
      this.currentIndex = index;
      this.timeType = item.id;
      this.pageNum = 1;
      this.list = [];
      this.isbottom = false;
      this.isBg = false;
      this.getData(this.timeType);
    },
    getData() {
      if (this.isbottom) {
        return false;
      }
      wx.showLoading({
        title: "加载中",
        mask: true
      });
      common.fly_post(
        "/api/com.mmk.member.api.OpenUsersAmountTransProvider/1.0.0/detailList.html",
        {
          pageNum: this.pageNum,
          pageSize: 15,
          dateType: this.timeType
        },
        msg => {
          wx.hideLoading();
          let res = msg.data;
          if (res.code == 0) {
            if(!res.data||!res.data.list){
               //没有积分明细
              this.isBg = true;
              return;
            }
            if (res.data.list.length == 0 && this.pageNum > 1) {
              wx.showToast({
                title: "已经到最底下了",
                icon: "none",
                duration: 1000,
                mask: true
              });
              this.isbottom = true;
              return false;
            } else if (res.data.list.length == 0 && this.pageNum == 1) {
              //没有积分明细
              this.isBg = true;
            } else if (res.data.list.length > 0 && this.pageNum == 1) {
              this.isBg = false;
              this.list = [];
              this.list = res.data.list;
            } else if (res.data.list.length > 0 && this.pageNum > 1) {
              this.isBg = false;
              this.list.push(...res.data.list);
            }
          } else {
            wx.hideLoading();
            wx.showToast({
              title: res.msg,
              icon: "none",
              duration: 2000,
              mask: true
            });
            return false;
          }
        },"isJava"
      );
    },
    pullrefresh() {
      this.pageNum++;
      this.getData(this.pageNum);
    }
  },

  onLoad() {
    wx.setNavigationBarTitle({
      title: "积分明细"
    });
    Object.assign(this.$data, this.$options.data());
    this.currentIndex = 0;
    this.timeType = 0;
    this.getData();
  },
  onShow() {}
};
</script>

<style scoped lang="less">
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #fbfbfb;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  &.bgClass {
    // background-image: url("https://h5.ameimeika.com/mp_images/shouye/sousuowujieguo@2x.png");
    // background-repeat: no-repeat;
    // width: 100%;
    // height: 100%;
    // background-position: 50% 30%;
    // background-size: 40%;
  }
}

.dv {
  width: 100%;
  height: 60px;
  line-height: 30px;
  box-sizing: border-box;
  color: #fff;
  background: #f3f4f6;
  /* margin-bottom: 15px; */
  padding: 15px;
}
.dv_item {
  width: auto;
  height: 30px;
  box-sizing: border-box;
  font-size: 12px;
  color: rgba(102, 102, 102, 1);
  line-height: 30px;
  padding: 0 15px;
  background: rgba(245, 231, 233, 1);
  border-radius: 15px;
  margin-right: 10px;
  float: left;
}
.active {
  box-sizing: border-box;
  border: 1px solid rgba(246, 70, 101, 1);
  color: #f64665;
}
.list {
  width: 100%;
  height: 100%;
  /* padding:0 15px; */
  box-sizing: border-box;
  background: #fff;
  padding: 0 15px;
}
.list_li {
  height: 59px;
  box-sizing: border-box;
  background-color: #fff;
  padding: 10px 0;
  box-sizing: border-box;
  position: relative;
}
.title {
  height: 20px;
  font-size: 14px;
  font-weight: 400;
  color: #666;
  line-height: 20px;
}
.time {
  height: 17px;
  font-size: 12px;
  font-weight: 400;
  color: #888;
  line-height: 17px;
}
.amount {
  height: 24px;
  font-size: 17px;
  font-weight: 500;
  color: #444;
  line-height: 24px;
  position: absolute;
  right: 0;
  top: 10%;
}
.tip {
  font-size: 10px;
  color: #666;
  line-height: 14px;
  position: absolute;
  right: 0;
  top: 48%;
}
.red {
  color: #ff383e;
}
.bgbox {
    width: 100%;
    height: 100%;
    padding: 90px 0;
    box-sizing: border-box;
    .nothing {
      width: 128px;
      height: 114px;
      margin: 0 auto;
      display: block;
    }
    .text {
      width: 100%;
      font-size: 14px;
      font-weight: 400;
      margin-top: 13px;
      color: rgba(153, 153, 153, 1);
      text-align: center;
    }
  }
</style>

